<template>
  <CDialog
    :visible="visible"
    title="端口详情"
    width="500px"
    @outerOpen="outerOpen"
    @cancel="handleCancel"
    top="10vh"
  >
    <el-table :data="handlePortsList" style="width: 100%" max-height="800">
      <el-table-column fixed prop="socketId" label="端口号" width="180">
      </el-table-column>
      <el-table-column prop="socketStatus" label="状态" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80">
        <template slot-scope="scope">
          <el-button
            class="table-button-green"
            @click.native.prevent="
              handleSelfCheck(scope.$index, handlePortsList)
            "
          >
            自检
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </CDialog>
</template>
<script>
import CDialog from '@/components/CDialog'
import { detailSelfCheck } from '@/api/device'
export default {
  name: 'PortsListForCentralSocket',
  components: { CDialog },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    portsList: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
  data() {
    return {}
  },
  created() {
    console.log('组件被创建')
  },
  computed: {
    handlePortsList() {
      console.log('进入computed重新操作数据')
      console.log(this.portsList.socketsStatus)
      let list = []
      if (this.portsList.socketsStatus) {
        let keys = Object.keys(this.portsList.socketsStatus)
        keys.forEach((socket) => {
          console.log(socket, this.portsList.socketsStatus[socket])

          list.push({
            socketId: socket,
            socketStatus: this.portsList.socketsStatus[socket],
            ...this.portsList.socketsStatus,
          })
        })
      }
      return list
    },
  },
  methods: {
    handleCancel() {
      this.$emit('update:visible', false)
    },
    outerOpen() {},
    handleSelfCheck(index, row) {
      const loading = this.$loading({
        lock: true,
        text: '设备自检中……',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.8)',
      })
      var socketId = row[index].socketId
      // var socketId = row.type == 'CENTRAL_SOCKET' ? row.deviceId : row.socketId

      detailSelfCheck({ socketId: socketId }).then(
        (res) => {
          loading.close()
          this.$message({
            message: res.breakDownReason || '自检成功',
            type: 'success',
            showClose: true,
          })
          this.refreshTable()
        },
        () => {
          loading.close()
        }
      )
    },
  },
}
</script>
